/**
 * ActionSheet 底部选择器组件
 * 类似 iOS ActionSheet 的底部弹出选择器
 */
import React, { useEffect, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Modal,
  Dimensions,
  TouchableWithoutFeedback,
} from 'react-native';
import {
  COLORS,
  RADIUS,
  FONT_SIZE,
  FONT_WEIGHT,
  SPACING,
} from '../styles/constants';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

/**
 * ActionSheet 组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否显示
 * @param {string} props.title - 标题
 * @param {Array} props.options - 选项列表 [{label, onPress, style}]
 * @param {function} props.onCancel - 取消回调
 * @param {string} props.cancelText - 取消按钮文字
 */
const ActionSheet = ({
  visible = false,
  title = '',
  options = [],
  onCancel,
  cancelText = '取消',
}) => {
  const translateY = useRef(new Animated.Value(SCREEN_HEIGHT)).current;
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (visible) {
      // 显示动画
      Animated.parallel([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 250,
          useNativeDriver: true,
        }),
        Animated.spring(translateY, {
          toValue: 0,
          friction: 9,
          tension: 65,
          useNativeDriver: true,
        }),
      ]).start();
    } else {
      // 隐藏动画
      Animated.parallel([
        Animated.timing(opacity, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.timing(translateY, {
          toValue: SCREEN_HEIGHT,
          duration: 200,
          useNativeDriver: true,
        }),
      ]).start();
    }
  }, [visible]);

  const handleBackdropPress = () => {
    if (onCancel) {
      onCancel();
    }
  };

  const handleOptionPress = option => {
    if (option.onPress) {
      option.onPress();
    }
  };

  return (
    <Modal
      visible={visible}
      transparent
      animationType="none"
      statusBarTranslucent
      onRequestClose={onCancel}
    >
      <View style={styles.container}>
        {/* 背景遮罩 */}
        <TouchableWithoutFeedback onPress={handleBackdropPress}>
          <Animated.View
            style={[
              styles.backdrop,
              {
                opacity,
              },
            ]}
          />
        </TouchableWithoutFeedback>

        {/* 底部面板 */}
        <Animated.View
          style={[
            styles.sheet,
            {
              transform: [{ translateY }],
            },
          ]}
        >
          {/* 标题 */}
          {title ? (
            <View style={styles.header}>
              <Text style={styles.title}>{title}</Text>
            </View>
          ) : null}

          {/* 选项列表 */}
          <View
            style={[
              styles.optionsContainer,
              !title && styles.optionsContainerNoHeader,
            ]}
          >
            {options.map((option, index) => (
              <TouchableOpacity
                key={index}
                style={[
                  styles.option,
                  index < options.length - 1 && styles.optionBorder,
                ]}
                onPress={() => handleOptionPress(option)}
                activeOpacity={0.7}
              >
                <Text
                  style={[
                    styles.optionText,
                    option.style === 'destructive' &&
                      styles.optionTextDestructive,
                  ]}
                >
                  {option.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>

          {/* 取消按钮 */}
          <View style={styles.cancelContainer}>
            <TouchableOpacity
              style={styles.cancelButton}
              onPress={handleBackdropPress}
              activeOpacity={0.7}
            >
              <Text style={styles.cancelText}>{cancelText}</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  sheet: {
    backgroundColor: COLORS.transparent,
    paddingBottom: SPACING.xl,
    paddingHorizontal: SPACING.md,
  },
  header: {
    backgroundColor: COLORS.white,
    paddingVertical: SPACING.lg,
    paddingHorizontal: SPACING.xl,
    borderTopLeftRadius: RADIUS.lg,
    borderTopRightRadius: RADIUS.lg,
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border.light,
  },
  title: {
    fontSize: FONT_SIZE.md,
    color: COLORS.text.quaternary,
    fontWeight: FONT_WEIGHT.medium,
  },
  optionsContainer: {
    backgroundColor: COLORS.white,
    borderBottomLeftRadius: RADIUS.lg,
    borderBottomRightRadius: RADIUS.lg,
    overflow: 'hidden',
  },
  optionsContainerNoHeader: {
    borderTopLeftRadius: RADIUS.lg,
    borderTopRightRadius: RADIUS.lg,
  },
  option: {
    paddingVertical: SPACING.lg,
    paddingHorizontal: SPACING.xl,
    alignItems: 'center',
  },
  optionBorder: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: COLORS.border.light,
  },
  optionText: {
    fontSize: FONT_SIZE.lg,
    color: COLORS.primary,
    fontWeight: FONT_WEIGHT.medium,
  },
  optionTextDestructive: {
    color: COLORS.status.error,
  },
  cancelContainer: {
    marginTop: SPACING.sm,
  },
  cancelButton: {
    backgroundColor: COLORS.white,
    borderRadius: RADIUS.lg,
    paddingVertical: SPACING.lg,
    paddingHorizontal: SPACING.xl,
    alignItems: 'center',
  },
  cancelText: {
    fontSize: FONT_SIZE.lg,
    color: COLORS.text.secondary,
    fontWeight: FONT_WEIGHT.semibold,
  },
});

export default ActionSheet;
